<template>
  <div class="SerachResult">
    <Row>
      <Col span="23" style="margin-top:10px;margin-left:20px">
      <!-- 顶部按钮和分页 -->
      <Row>
        <Col span="24">
        <Divider>
          <h1>搜索结果</h1>
        </Divider>
        </Col>
      </Row>
      <!-- 表格 -->
      <Col span="24">
      <template>
        <Table :columns='tableTitle' :data='searchData' border size='large'></Table>
      </template>
      </Col>
      <!-- 分页 -->
      <Col span="24" style="margin-top:20px;margin-bottom:20px;margin-left:480px">
      <Page :current="this.params.page" :total='parseInt(this.total)' simple :page-size='this.params.limit' @on-change='changePage'
      />
      </Col>
      </col>
    </Row>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        // 查询参数
        params: {
          keyword: this.$route.params.keyword,
          page: 1,
          limit: 9,
        },

        //查询结果条数
        total: '',

        //api接口
        url: {
          searchProject: this.$Global.url.searchProject
        },

        //搜索结果数据
        searchData: [{
          feature: [],
          icon: "",
          titleName: "",
          function: [],
        }],

        // 表格数据
        tableTitle: [
          {
            title: "方案名称",
            key: "titleName"
          },
          {
            title: "特点",
            key: "feature",
            align: "center",
            render: this.renderFeature
          },
          {
            title: "功能",
            key: "function",
            align: "center",
            render: this.renderFunctions
          },
          {
            title: "推荐星数",
            align: "center",
            key: "recommend",
            render: this.renderRate
          },
          {
            title: "图片",
            key: "icon",
            align: "center",
            render: this.renderPicture
          },
          {
            title: "查看详情",
            key: "action",
            width: 150,
            align: "center",
            render: this.renderDetailInfo
          }
        ],
      };
    },

    // 路由变化监听
    watch: {
      $route(to, from) {
        this.params.keyword = this.$route.params.keyword;
        // this.scrollBehavior(to, from, savedPosition)
        this.getSearchData()
      }
    },

    methods: {
      //******************************获取数据***********************/
      /**
       * 根据关键词查找数据
       */
      getSearchData() {

        this.$http
          .get(this.url.searchProject, { params: this.params })
          .then(res => {
            if (res.status == 200) {
              this.searchData = res.data.docs;
              console.log(res);
              //由于是跨域请求,地址在开发者模式下要进行更改
              if (process.env.NODE_ENV === "development") {
                for (let i = 0; i < res.data.docs.length; i++) {
                  this.searchData[i].icon = this.$Global.url.baseUrl + res.data.docs[i].icon;
                }
              }
              this.total = res.data.total;
              console.log(this.searchData);
              console.log(this.total);
            }
          })
          .catch(error => console.log(error));
      },

      /***********************表格渲染************************/
      /**
       * 渲染出表格里的方案特点
       * @param {表格封装好的参数,能够指向每一列每一行的数据} params
       */

      renderFeature(h, params) {
        return h('Poptip', {
          props: {
            trigger: 'hover',
            title: '方案特点',
            placement: 'bottom'
          }
        }, [
            h('Tag', { props: { color: 'orange', } }, '查看方案特点'),
            h('div', { slot: 'content' }, [
              h('ul', this.searchData[params.index].feature.map(item => {
                return h('li', { style: { textAlign: 'left', padding: '4px' } }, item)
              }))
            ])
          ]);
      },

      /**
         * 显示方案功能
         *  @param {表格封装好的参数,能够指向每一列每一行的数据} params
         */
      renderFunctions(h, params) {
        return h(
          "Poptip",
          {
            props: {
              trigger: "hover",
              title: "功能",
              placement: "bottom"
            }
          },
          [
            h("Tag", { props: { color: "orange" } }, "查看方案功能"),
            h("div", { slot: "content" }, [
              h(
                "ul", this.searchData[params.index].function.map(item => {
                  return [h("li", { style: { textAlign: "left", padding: "4px" } }, item)];
                })
              )
            ])
          ]
        );
      },

      /**
       * 渲染出表格里的图片
       *  @param {表格封装好的参数,能够指向每一列每一行的数据} params
       */
      renderPicture(h, params) {
        return h('Poptip', { props: { trigger: 'hover', placement: 'bottom' } }, [
          h('Tag', { props: { color: 'magenta' } }, '查看图片'),
          h('div', { slot: 'content' }, [
            h('img', { attrs: { src: this.searchData[params.index].icon }, })
          ])
        ])
      },

      /**
       * 渲染表格里的按钮
       *  @param {表格封装好的参数,能够指向每一列每一行的数据} params
       */
      renderDetailInfo(h, params) {
        return h('div', [
          h('Button', {
            props: {
              type: 'primary',
              size: 'small'
            },
            style: {
              marginRight: '5px'
            },
            on: {
              click: () => {
                this.btnActionDetail(params.index)
              }
            }
          }, '查看详细信息')
        ])
      },

      /**
       * 在表格里渲染出星级评分
       *  @param {表格封装好的参数,能够指向每一列每一行的数据} params
       */
      renderRate(h, params) {
        return h('div', [
          h('Rate', {
            props: {
              count: 5,
              value: this.searchData[params.index].recommend,
              disabled: true,
            }
          })
        ])
      },

      /**
       * 页数跳转
       * @param {事件返回当前的页数} page
       */
      changePage(page) {
        this.params.page = page
        // sessionStorage.setItem('page', this.page);
        // this.$store.commit('setParams');
        this.getSearchData()
        // console.log(page)
        // console.log(this.params.page)
      },

      /**
       * 进入详情页面
       * @param {表示当前是第几行} index
       */
      btnActionDetail(index) {
        var param = {
          projectid: this.searchData[index].project_id
        };
        this.$router.push({ name: "ProjectDetailInfo", params: param });
      },
    },
    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.searchProject =
          this.$Global.url.baseUrl + this.$Global.url.searchProject;
      }
      console.log(this.url.searchProject);
      this.getSearchData();
    }
  };
</script>